{% extends "base.html" %}
{% block title %}用户列表{% endblock %}
{% block user %}用户列表{% endblock %}
{% block navbar %}{{ super() }}{% endblock %}

{% block scripts %}{{ super() }}

<script>
    $(document).ready(function () {
        $('#dt').DataTable(
            {
                "autoWidth": true,
                "pageLength": 25,
                dom: '<"top"flipB<"clear">>rt<"bottom"ipB<"clear">>',
                "order": [[2, "asc"], [0, "asc"]],
                buttons: [
                    'copy', 'csv', 'excel'
                ]
            });
    });
</script>
{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            {% include 'flash_message.html' %}
        </div>
        <h2 class="row page-header" style="text-align: center; color:blueviolet;">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                {{ year }} 年 {{ month }} 月 {{ username }} 项目考核成绩一览表
            </div>
        </h2>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table id="dt" class="row-border hover compact table" style="width:100%">
                <thead>
                    <tr>
                        <th>工作令号</th>
                        <th>项目名称</th>
                        <th>分数</th>
                        <th>打分者</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in grades %}
                    <tr>
                        <td>{{ user[1] }}</td>
                        <td>{{ user[2] }}</td>
                        <td>{{ user[0] }}</td>
                        <td>{{ user[3] }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}